<template>
  <div>

    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="style">

           /** */ 容器内占位符样式

            .bg-purple {
              background: #d3dce6;
            }
            .bg-purple-light {
              background: #e5e9f2;
            }
            .grid-content {
              border-radius: 4px;
              min-height: 36px;
            }

        </code>
    </pre>
    </div>

    <!-- 格栅布局 -->
    <grille></grille>
  
      <!-- 分栏布局 -->
    <gutter></gutter>

    <!-- 分栏偏移 -->
    <offset></offset>

    <!-- 自定义列宽 -->
    <selfWidth></selfWidth>

    <!-- 自定义偏移 -->
    <selfOffset></selfOffset>

    <!-- flex -->
    <flex></flex>

  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import grille from "./group/grille/index.vue";
  import gutter from "./group/gutter/index.vue";
  import offset from "./group/offset/index.vue";
  import selfWidth from "./group/self-width/index.vue";
  import selfOffset from "./group/self-offset/index.vue";
  import flex from "./group/flex/index.vue";

  export default defineComponent({
    components: { grille,gutter ,offset,selfWidth,selfOffset,flex},
    setup() {},
  });
</script>

<style lang="scss" scoped>

</style>
